<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      .wrap {
        width: 100%;
        height: auto;
        border: 1px solid black;
        padding: 10px;
      }
      /* .wrap img {
        display: block;
        width: 100%;
        height: 100vh;
        margin-bottom: 30px;
      } */
    </style>
  </head>
  <body>
    <div class="wrap">
      <!-- <img src="../img/avatar.png" width="80" /> -->
    </div>
    <ul id="ul">
      <!-- <li></li> -->
    </ul>
    <script>
      // //用for循环答应1-100的和
      // var x = 0;
      // for (let i = 0; i <= 100; i++) {
      //   x += i;
      // }
      // console.log(x); //5050

      // //打印1-100之间3的倍数
      // for (let i = 1; i < 100; i++) {
      //   if (i % 3 == 0) {
      //     console.log(i);
      //   }
      // }
      // //打印1-100之间十位上是7的数
      // for (let i = 1; i < 100; i++) {
      //   if (parseInt(i / 10) == 7) {
      //     console.log(i);
      //   }
      // }

      //for循环应用案例
      var wrap = document.getElementsByClassName("wrap")[0];
      var arr = [
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
        "../img/avatar.png",
      ];
      console.log(arr.length);
      for (let i = 0; i < arr.length; i++) {
        wrap.innerHTML += `
      						<img src="${arr[i]}" width="80"/>
      					`;
      }
      const ul = document.getElementById("ul");
      for (let i = 0; i < 10; i++) {
        ul.innerHTML += `<li>${i + 1}</li>`;
      }
    </script>
  </body>
</html>
